<template>
	<view>
		<u-popup :show="showPay" :round="10" mode="center" @close="close" @open="open">
		    <view class="popup-pay">
		        <view class="money">￥ <text>{{money}}</text> </view>
				<view class="pay-title">平台运营成本较高，为了更多渠道的帮您宣传，该信息为付费信息，付款后，您可享受以下服务</view>
				<view class="content">
					1.该信息在半柿平台长期展示，上架费用只收一次 <br/>
					2.我们会在所有群里，推送您的信息 <br/>
					3.我们会在各大视频平台，推送您的信息 <br/>
					4.我们不收任何中介费，成交后，不收任何费用 <br/>
					5.如有客户对您的信息有兴趣，咨询客服时，我们会主动推荐
				</view>
				
				
				<view class="pay-type">
					<view class="pay-each" @click="paytype = 2">
						<image src="../static/wx.png" class="icon" mode=""></image>
						微信支付
						<image :src="paytype==2?'../static/index/select.png':'../static/index/no_select.png'" class="select" mode=""></image>
					</view>
					<view class="pay-each" @click="paytype = 4">
						<image src="../static/balance.png" class="icon" mode=""></image>
						余额支付
						<image :src="paytype==4?'../static/index/select.png':'../static/index/no_select.png'" class="select" mode=""></image>
					</view>
				</view>
				
				
				
				<view class="pay-btn-box">
					<view class="pay-btn pay-btn-l" @click="guanbi">关闭</view>
					<view class="pay-btn pay-btn-r" @click="payment">立即支付</view>
				</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			showPay: {
				type: Boolean,
				default:false
			},
			money: {
				type: Number,
				default:0
			},
			type:{
				type: Number,
				default:0
			},
			order_id:{
				type: Number,
				default:0
			}
		},
		name:"popup-pay",
		data() {
			return {
				paytype:2,
				
			};
		},
		methods:{
			guanbi(){
				this.showPay = false
				this.$emit('padlock')
			},
			payment(){
				let that = this
				uni.$u.http.post('/createnoticeorder', {
					type: this.type,
					order_id: this.order_id,
					paytype: this.paytype,
				}).then(res => {
					if (res.code == 1) {
							if(res.data.paystatus == 1){
								this.$u.toast('支付成功');
								setTimeout(() => {
									uni.$u.route({
										type: 'back'
									})
								}, 1000)
								return
							}
						
						
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							appId: res.data.pay.appId,
							nonceStr: res.data.pay.nonceStr,
							package: res.data.pay.package,
							paySign: res.data.pay.paySign,
							signType: res.data.pay.signType,
							timeStamp: res.data.pay.timeStamp,
							success: (e) => {
								that.$u.toast('支付成功');
								setTimeout(() => {
									uni.$u.route({
										type: 'back'
									})
								}, 1000)
							},
							fail: (e) => {
								that.$u.toast('支付失败');
							}
						})
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: this.type == 1 ? 'wxpay' : 'alipay',
							orderInfo: res.data, //微信、支付宝订单数据
							success: function(res) {
								that.$u.toast('支付成功');
								setTimeout(() => {
									uni.$u.route({
										type: 'back'
									})
								}, 1000)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								that.$u.toast('支付失败');
							}
						});
						// #endif
						
						// #ifdef MP-TOUTIAO
						uni.requestPayment({
							orderInfo: {
								order_id: res.data.pay.data.order_id,
								order_token: res.data.pay.data.order_token
							},
							service: 5,
							getOrderStatus: e => {
								console.log(e)
							},
							success: response => {
								if (response.code == 0) {
									console.log('支付成功')
								}
							},
							fail: (e) => {
								console.log(e)
								this.toast('支付失败');
							}
						})
						// #endif
					}
				}).catch((res) => {
				
				})
			}
		}
	}
</script>

<style lang="scss">
	.popup-pay {
		width: 542rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		
		.money {
			font-weight: 800;
			font-size: 24rpx;
			color: #FA6759;
			text-align: center;
			text {
				font-size: 40rpx;
			}
		}
		.pay-title {
			font-weight: 500;
			font-size: 24rpx;
			color: #1C274C;
			line-height: 46rpx;
			text-align: center;
			padding-top: 24rpx;
		}
		.content {
			width: 482rpx;
			background: linear-gradient( 90deg, #FFF9ED 0%, #FFFCF6 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 30rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #666666;
			margin-top: 30rpx;
			line-height: 38rpx;
		}
		
		.pay-type {
			display: flex;
			align-items: center;
			.pay-each {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				margin-top: 24rpx;
				margin-right: 52rpx;
				.icon {
					width: 42rpx;
					height: 42rpx;
					margin-right: 12rpx;
				}
				.select {
					width: 22rpx;
					height: 22rpx;
					margin-left: 18rpx;
				}
			}
		}
		
		.pay-btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;
			.pay-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				width: 259rpx;
				height: 80rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				
			}
			.pay-btn-l {
				background: #F6F6F6;
			}
			.pay-btn-r {
				background: #FEBF4E;
			}
		}
	}
</style>